<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/jquery.js"></script>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/bootstrap.min.js"></script>
    <style>
        tbody tr td{
            vertical-align: middle !important;
        }
    </style>
</head>

<body>
    <div class="row">
        <h1 style="text-align: center">员工信息管理</h1>
    </div>
    <!-- 表格 -->
    <div class="container" style="padding-top: 40px;">
        <div class="form-group">
            <div class="row">
                <div class="col-md-3">
                    <button class="btn btn-default add" data-toggle="modal" data-target="#myModel">
                        增加
                    </button>
                </div>
            </div>
        </div>
        <table class="table table-bordered text-center">
            <tr>
                <td>头像</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>入职时间</td>
                <td>所在部门</td>
                <td>职位</td>
                <td>联系电话</td>
                <td>薪水</td>
            </tr>
            <tbody id="showMessage">

            </tbody>
        </table>
        <div class="row">
            <div id="show_page_info" class="col-md-4" style="line-height: 80px">

            </div>
            <div id="show_page_nav" class="col-md-8 text-right">
                <nav aria-label="Page navigation">
                    <ul class="pagination" id="pagination">

                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 增加的模态框 -->
    <div class="modal fade" id="myModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">增加信息</h4>
                </div>
                <div class="modal-body">
                    <form id="employeeAddForm" enctype="multipart/form-data">
                        <div class="form-group">
                            <input type="file" accept="image/*" placeholder="头像" id="ImageFileAdd"
                                name="employeeImageFile" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="姓名" id="EmpNameAdd" name="empName" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="date" placeholder="出生日期" id="ageAdd" name="birthDate" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="date" placeholder="入职时间" id="hireDateAdd" name="hireDate"
                                class="form-control" />
                        </div>

                        <div class="form-group">
                            <select class="form-control">
                                <option value="-1">-请选择-</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <input type="text" placeholder="所在部门" id="departmentAdd" name="departmentId"
                                class="form-control" />
                        </div>


                        <div class="form-group">
                            <input type="text" placeholder="职位" id="jobTitleAdd" name="jobTitle" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="联系电话" id="phoneNumberAdd" name="phoneNumber"
                                class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="薪水" id="salaryAdd" name="salary" class="form-control" />
                        </div>
                        <div class="form-group">
                            <img id="showPic" src="" class="img-thumbnail" />
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary aad" data-dismiss="modal">增加信息</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <script>
        //获取上传元素
        let EmployeeFile = document.getElementById("ImageFileAdd");
        EmployeeFile.onchange = function () {
            //本地预览
            //获取用户选择的图片
            let file = this.files[0];
            console.log(file);
            //给选择的图片创建一个url路径
            let url = URL.createObjectURL(file);
            console.log(url);
            //将地址交给img
            $("#showPic").attr("src", url);
        };


        $(function () {
            var pageNum = 1;
            onleadOk(pageNum);
        })
        //页面加载
        function onleadOk(pageNum) {
            $.ajax({
                url: 'http://localhost:24080/employees/page',
                type: 'get',
                data: {
                    pageNum: pageNum,
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data)
                    if (!data.status) {
                        alert(data.message);
                    }
                    var tbody = $('#showMessage');
                    tbody.empty(); // 清空现有的表格内容

                    //分页信息
                    let pageInfo = $('#show_page_info');
                    pageInfo.empty();

                    let span = `当前${data.data.pageNum}页,总${data.data.pages}页,总共${data.data.total}条记录`;
                    pageInfo.append(span);


                    //分页列
                    let pagination = $("#pagination");
                    pagination.empty();

                    let firstdisable = data.data.isFirstPage ? "disabled" : "";
                    let enddisable = data.data.isLastPage ? "disabled" : "";

                    let firstLi = `<li class ="${firstdisable}" jumpPageNum="1">
                            <a href="javascript:;"><span>首页</span></a>
                            </li>`;
                    pagination.append(firstLi);

                    let firstLiIcon = `<li class ="${firstdisable}" jumpPageNum="${data.data.pageNum - 1}">
                            <a href="javascript:;"><span>《</span></a>
                            </li>`;
                    pagination.append(firstLiIcon);

                    for (let i = 1; i <= data.data.pages; i++) {
                        let active = "";
                        if (data.data.pageNum == i) {
                            active = "active";
                        }
                        let li = `<li class ="${active}" jumpPageNum="${i}">
                            <a href="javascript:;"><span>${i}</span></a>
                            </li>`;
                        pagination.append(li);
                    }
                    let endtLi = `<li class ="${enddisable}" jumpPageNum="${data.data.pageNum + 1}">
                            <a href="javascript:;"><span>》</span></a>
                            </li>`;
                    pagination.append(endtLi);

                    let endLiIcon = `<li class ="${enddisable}" jumpPageNum="${data.data.pages}">
                            <a href="javascript:;"><span>末页</span></a>
                            </li>`;
                    pagination.append(endLiIcon);

                    //渲染数据
                    data.data.list.forEach(function (employee) {
                        //展示图片
                        let employeePathUrl = employee.imagePath;
                        if (employeePathUrl == null) {
                            employeePathUrl = "";
                        } else {
                            employeePathUrl = 'http://localhost:24080/' + employeePathUrl;
                        }

                        var row = `<tr>
                            <td>
                                <img style="width: 50px;height: 50px; class="img-thumbnail" src="${employeePathUrl}">
                            </td>
                            <td>${employee.empName}</td>
                            <td>${employee.age}</td>
                            <td>${employee.hireDate}</td>
                            <td>${employee.department.departmentName}</td>
                            <td>${employee.jobTitle}</td>
                            <td>${employee.phoneNumber}</td>
                            <td>${employee.salary}</td>
                        </tr>`;
                        tbody.append(row);
                    });
                }
            })
        }

        //增加的功能
        // 在点击增加按钮时处理数据并发送
        $(document).on("click", ".aad", function () {
            // 获取表单数据
            let form = document.querySelector("#employeeAddForm");

            let formData = new FormData(form);

            // 使用JSON.stringify来确保发送的是一个JSON字符串
            $.ajax({
                url: 'http://localhost:24080/employees',
                type: 'post',
                data: formData, // 发送JSON格式的数据
                cache: false, //设置为false，jQuery不需要从浏览器缓存  默认为true
                processData: false, // 对数据的处理方式，默认为true，会将数据处理为对象格式
                contentType: false, //需要设置false，不然后台拿不到数据
                success: function (data) {
                    console.log(data);
                    alert('新增成功！')
                    onleadOk(1); // 刷新列表

                }
            });
            //清除表单数据
            $('#myModel :input').val('');
            $("#myModel").modal('hide');
        });

        //点击页码，局部刷新
        $(document).on("click", "#pagination li", function () {
            onleadOk($(this).attr("jumpPageNum"));
        });

    </script>
</body>

</html>